<template>
  <el-dialog
    :title="title"
    :visible="visible"
    fullscreen
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div
      class="preview"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-text="加载中"
    >
      <el-scrollbar>
        <pdf v-for="i in numPages" :key="i" :src="link" :page="i"></pdf>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  props: {
    visible: Boolean,
    src: String,
    title: String
  },
  data() {
    return {
      link: '',
      numPages: 1,
      loading: false
    }
  },
  mounted() {
    this.getNumPages()
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    getNumPages() {
      this.loading = true
      var loadingTask = pdf.createLoadingTask(this.src)
      loadingTask.promise
        .then(pdf => {
          this.link = loadingTask
          this.numPages = pdf.numPages
          setTimeout(() => {
            this.loading = false
          }, 2000)
        })
        .catch(() => {
          console.error('pdf加载失败')
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e4e7ed;
}
::v-deep .el-dialog__body {
  padding: 0;
}
.preview {
  height: calc(100vh - 55px);
  ::v-deep .el-scrollbar {
    height: 100%;
    .el-scrollbar__wrap {
      overflow-x: auto;
    }
  }
}
</style>
